<template>
  <div id="carAssess">
    <div class="container">
      <div class="container-header">
        <span>—— 精准填写资料有利于获得精准报价 ——</span>
      </div>
      <div class="container-body">
        <el-form label-position="right"
                 label-width="85px"
                 :model="notSendObj">
          <el-form-item label="卖车地点：">
            <el-select v-model="notSendObj.fitstCityId"
                       class="select-address"
                       placeholder="请选择省份"
                       @change="selectCity">
              <el-option
                v-for="item in cityObj.firstCity"
                :key="item.cityId"
                :label="item.name"
                :value="item.cityId" />
            </el-select>
            <el-select v-model="notSendObj.lastCityId"
                       class="select-address"
                       placeholder="请选择城市">
              <el-option
                v-for="item in cityObj.lastCity"
                :key="item.cityId"
                :label="item.name"
                :value="item.cityId" />
            </el-select>
          </el-form-item>
          <el-form-item label="车型：">
            <el-select v-model="notSendObj.carBrandId"
                       class="select-address"
                       placeholder="请选择车品牌"
                       @change="getCarSeriesList">
              <el-option-group
                v-for="(value, key) in carBrandListObj"
                :key="key"
                :label="key">
                <el-option
                  v-for="item in value"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id" />
              </el-option-group>
            </el-select>  
            <el-select v-model="sendObj.carInfoId"
                       class="select-address"
                       placeholder="请选择车系">
              <el-option
                v-for="item in CarSeriesList"
                :key="item.id"
                :label="item.name"
                :value="item.id" />
            </el-select>  
          </el-form-item>
          <el-form-item label="上牌时间：">
            <el-date-picker v-model="notSendObj.address"
                            type="month"
                            placeholder="选择日期" />
          </el-form-item>
          <el-form-item label="行驶里程：">
            <el-input v-model="sendObj.carStr.kilo"
                      placeholder="请输入行驶里程">
              <template slot="append">
                万公里
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="车况自评：">
            <el-select v-model="sendObj.carStr.accident"
                       placeholder="请选择">
              <el-option
                label="从未有碰撞"
                :value="1" />
              <el-option
                label="轻微碰撞"
                :value="2" />
              <el-option
                label="碰撞伤及骨架"
                :value="3" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-button @click="carAssess">
          开始估价
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { getCityList } from '@/api/city';
  import { getAllCarBrandList, getCarSeriesList } from '@/api/carcategory';
  import { getAssessPrice } from '@/api/caroperation';

  export default {
    name: 'carAssess',
    data() {
      return {
        notSendObj: {
          fitstCityId: '',
          lastCityId: '',
          carBrandId: '',
          carInfoId: '',
        },
        sendObj: {
          carInfoId: '',
          carStr: {
            kilo: '',
            accident: '',
            fireAccident: 0,
            waterAccident: 0,
          },
        },
        cityObj: {
          firstCity: [],
          lastCity: [],
        },
        carBrandListObj: {},
        CarSeriesList: [],
      };
    },
    watch: {
      CarSeriesList() {
        this.sendObj.carInfoId = '';
      },
    },
    mounted() {
      // 获取一级城市
      this.getCityList(1);
      this.getAllCarBrands();
    },
    methods: {
      // 获取城市
      getCityList(cityId) {
        getCityList({ cityId }).then(data => {
          if (data.success) {
            if (cityId === 1) {
              this.cityObj.firstCity = data.cityList;
            } else {
              this.cityObj.lastCity = data.cityList;
            }
          }
        });
      },
      // 获取二级城市
      selectCity() {
        this.notSendObj.lastCityId = '';
        this.getCityList(this.notSendObj.fitstCityId);
      },
      // 获取车品牌
      getAllCarBrands() {
        getAllCarBrandList().then(data => {
          if (data.success) {
            this.carBrandListObj = data.cbMap;
          } else {
            this.$message.error('获取车品牌列表失败');
          }
        });
      },
      // 获取品牌对应车系
      getCarSeriesList(brandId) {
        getCarSeriesList({ brandId }).then(data => {
          if (data.success) {
            this.CarSeriesList = data.csList;
          }
        });
      },
      carAssess() {
        const { carStr } = this.sendObj;
        carStr.kilo = carStr.kilo || 0;
        if (carStr.kilo > 30) {
          this.$message.warning('里程大于30万公里，维修保养费可能比车本身价值还高，不建议出售');
          return;
        }
        getAssessPrice(this.sendObj).then(data => {
          if (data.success) {
            this.$alert(`您的爱车预估价为：${data.assessPrice}万元`, {
              confirmButtonText: '确定',
              callback: () => {
              },
            });
          } else {
            this.$message.error(data.errMsg);
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
#carAssess {
  height: 7rem;
  border-top: 1px solid #e5e6e6;
  .container {
    width: 5rem;
    height: 6rem;
    margin: 1rem auto;
    .container-header {
      height: 0.7rem;
      line-height: 0.7rem;
      text-align: center;
      font-size: 0.14rem;
      color: #999;
    }
    .container-body {
      .select-address {
        width: 2rem;
      }
      button {
        width: 3rem;
        height: 0.5rem;
        margin: 0 1rem;
        border-radius: 3px;
        background: linear-gradient(
          90deg,
          rgba(252, 150, 0, 1),
          rgba(248, 93, 0, 1)
        );
        font-size: 18px;
        color: #fff;
        cursor: pointer;
        opacity: 0.9;
      }
    }
  }
}
</style>
